<template>
  <div class="main-all">
    <p><i class="el-icon-s-flag"></i>课程管理</p>
    <div class="main">
      <div class="main-1">
        <el-button icon="el-icon-plus" @click="dialogFormVisible = true; ADD()">新建</el-button>
        <div style="display: flex;">
          <el-input style="margin-right: 20px; height: 30px; width: 100px;" v-model="inputClass"
            placeholder="课程名"></el-input>
          <el-input style="margin-right: 20px; height: 30px; width: 100px;" v-model="inputTeacher"
            placeholder="教师名"></el-input>
          <el-input style="margin-right: 20px; height: 30px; width: 100px;" v-model="inputMajor"
            placeholder="系名"></el-input>
          <el-button type="primary" @click="getPage" icon="el-icon-search">搜索</el-button>
        </div>
      </div>
      <el-pagination @current-change="fn2" :current-change="page" background layout="prev, pager, next" :total="total"
        style="margin-bottom: 10px;">
        <!--total页码，设定为变量 -->
      </el-pagination>
      <div style="overflow-y: scroll;width: 100%;height: 80%;">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="课程ID">
          </el-table-column>
          <el-table-column prop="name" label="课程名">
          </el-table-column>
          <el-table-column prop="teacherName" label="教师">
          </el-table-column>
          <el-table-column prop="departmentName" label="所属系">
          </el-table-column>
          <el-table-column prop="grade" label="年级">
          </el-table-column>
          <el-table-column prop="credit" label="学分">
          </el-table-column>
          <el-table-column prop="time" label="上课时间">
          </el-table-column>
          <el-table-column prop="selectedCount" label="已选人数">
          </el-table-column>
          <el-table-column prop="maxSize" label="最大容量">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogFormVisible = true; changed(scope.row)">编辑</el-button>
              <el-button type="text" @click=" deletes(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--  -->


      <el-dialog width="35%" title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form" :label-width="formLabelWidth" :rules="rules">
          <el-form-item label="课程名" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="授课教师" prop="teacherName">
            <el-select style="width: 100%;" v-model="form.teacherName" placeholder="请选授课教师">
              <el-option v-for="(item, index) in tableDataAll" :key="index" :label="item.name"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级" prop="grade">
            <el-input-number :min="1981" :max="2900" style="width: 100%;" controls-position="right" v-model="form.grade"
              autocomplete="off"></el-input-number>
          </el-form-item>
          <el-form-item label="上课时间" prop="week">
            <el-select style="width: 100%;" v-model="form.week" placeholder="请选星期">
              <el-option v-for="(item, index) in weeks" :key="index" :label="item.data" :value="item.id"></el-option>
            </el-select>
            <el-select style="width: 100%;" v-model="form.jie" placeholder="请选节课">
              <el-option v-for="(item, index) in kejies" :key="index" :label="item.data" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时长(节)" prop="shichang">
            <el-input-number :min="0" :max="100" style="width: 100%;" controls-position="right" v-model="form.shichang"
              autocomplete="off"></el-input-number>
          </el-form-item>
          <el-form-item label="上课地点" prop="location">
            <el-input v-model="form.location" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学分" prop="credit">
            <el-input-number :min="1" :max="20" style="width: 100%;" controls-position="right" v-model="form.credit"
              autocomplete="off"></el-input-number>
          </el-form-item>
          <el-form-item label="最大容量" prop="maxSize">
            <el-input v-model="form.maxSize" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="考试地点" prop="examLocation">
            <el-input v-model="form.examLocation" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false; ADDorChange()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>


</template>

<script>
import serve from '../api/index.js'
import { getPages, getList, ADDList, changeorno, deleted, getListAll, getLessons } from '../api/lesson.js'
export default {
  data() {
    return {
      inputClass: '',
      inputTeacher: '',
      inputMajor: '',
      // 搜索二人组
      total: 100,
      // 页码算数
      page: 1,
      // 页数
      tableData: [],
      // 老师管理的res回复
      tableDataAll: [],
      // 系管理的res回复
      weeks: [
        {
          data: '星期一',
          id: '1'
        },
        {
          data: '星期二',
          id: '2'
        },
        {
          data: '星期三',
          id: '3'
        },
        {
          data: '星期四',
          id: '4'
        },
        {
          data: '星期五',
          id: '5'
        },
        {
          data: '星期六',
          id: '6'
        },
        {
          data: '星期日',
          id: '7'
        },
      ],
      // 星期
      kejies: [
        {
          data: '第一节',
          id: '1'
        },
        {
          data: '第二节',
          id: '2'
        },
        {
          data: '第三节',
          id: '3'
        },
        {
          data: '第四节',
          id: '4'
        },
        {
          data: '第五节',
          id: '5'
        },
        {
          data: '第六节',
          id: '6'
        },
        {
          data: '第七节',
          id: '7'
        },
        {
          data: '第八节',
          id: '8'
        },
        {
          data: '第九节',
          id: '9'
        },
      ],
      add: '',
      dialogFormVisible: false,
      form: {
        credit: '',               //学分
        examLocation: '',   //考试地点
        grade: '',                 //年级
        location: '',           //上课地点
        maxSize: '50',             //最大容量
        teacherName: '',    //教师
        week: '',
        jie: '',
        time: '',
        // time: week + '-' + jie + '-' + shichang,//时间==上课时间  星期-第几节-时长
        shichang: '',
        name: '',                   //课程名
        examDate: '',           //xxxx
        // id: '',             //课程ID
        // name: '',           //课程名
        // teacherName: '',    //教师
        // teacherNameID: '',   //教师ID
        // departmentName: '', //所属系
        // grade: '',          //年级
        // credit: ''          //学分
      },
      formLabelWidth: '80px',
      rules: {
        name: [
          { required: true, message: '请输入课程', trigger: 'blur' },
        ],
        location: [
          { required: true, message: '请输入上课地点', trigger: 'blur' },
        ],
        grade: [
          { required: true, message: '请输入年级', trigger: 'blur' },
        ],
        examLocation: [
          { required: true, message: '请输入年级', trigger: 'blur' },
        ],
        //  department: [
        //   { required: true, message: '请输入系', trigger: 'blur' },
        // ],
      }
    }
  },
  methods: {
    getPage() {
      getPages(this.inputClass, this.inputTeacher, this.inputMajor).then((res) => {
        console.log(res.data);
        this.total = res.data * 10
        if (res.message == 'success') {
          getList(this.page, this.inputClass, this.inputTeacher, this.inputMajor).then((res) => {
            console.log(res);
            this.tableData = res.data
          })

          getListAll().then(res => {
            console.log(res, 'getListAll');
            this.tableDataAll = res.data
          })
        }
      })
    },//获取列表数据
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },//element
    fn2(val) {
      this.page = `${val}`
      console.log(this.page);
      this.getPage()
    },//获取页数


    fn() {
      // 获取 系ID--departmentId
      // this.tableDataAll.filter((item) => {
      //   if (item.name == this.form.department) {
      //     this.form.departmentId = item.id
      //     // console.log(this.form.departmentId, 'departmentId');
      //   }
      // })
    },
    ADD() {
      this.fn()
      this.OR = 'ADD'
      console.log(this.form);
    },//添加列表数据  

    changed(e) {
      this.OR = 'changed'
      console.log(e, 'e');
      getLessons(e.id).then(res => {
        console.log(res);
        this.form = res.data
        this.form.teacherName = res.data.teacherId
        this.form.week = res.data.time.slice(0, 1)
        this.form.jie = res.data.time.slice(2, 3)
        this.form.shichang = res.data.time.slice(4, 5)
        console.log(this.form, 'form');

      })


    }, //修改列表数据

    ADDorChange() {
      console.log(this.form);

      if (this.OR == 'ADD') {
        this.fn()
        this.form.time = this.form.week + '-' + this.form.jie + '-' + this.form.shichang//week+jie+shichang
        console.log(this.form.time);
        ADDList(this.form.credit, this.form.examLocation, this.form.grade, this.form.location, this.form.maxSize, this.form.name, this.form.teacherName, this.form.time, this.form.examDate).then((res) => {
          console.log(res);
          this.getPage()
        })
      } else if (this.OR == 'changed') {
        // this.fn()
        changeorno(this.form).then((res) => {
          console.log(res);
          this.getPage()
        })
      }
    },
    // 
    deletes(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(id).then((res) => {
          console.log(res);
        })
        this.getPage()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      }); //删除列表数据   xxxx未完成

    }

  },
  mounted() {
    this.getPage()  //初始化列表数据
  }
}

</script>

<style scoped>
.el-table {
  width: 100% !important;
}

.main {
  .el-button {
    height: 40px;
  }

  .main-1 {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px;
    justify-content: space-between;
  }


}
</style>
